<template>
  <div class="maincontent">
    <div class="maintitle">基本信息</div>
    <el-row :gutter="20" class="information">
      <el-col :span="10">
        <div class="item">
          项目名称：
          <span>{{detailData.name}}</span>
        </div>
        <div class="item">
          项目编号：
          <span>{{detailData.number}}</span>
        </div>
        <div class="item">
          项目地址：
          <span>{{detailData.address}}</span>
        </div>
        <div class="item">
          项目年度：
          <span>{{detailData.year}}</span>
        </div>
        <div class="item">
          项目级别：
          <span>{{detailData.level === 0 ? "市级" : "区县级"}}</span>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="item">
          项目类型：
          <span>{{detailData.types}}</span>
        </div>
        <div class="item">
          图幅号：
          <span>{{detailData.frameNumber}}</span>
        </div>
        <div class="item">
          项目工期：
          <span>{{detailData.duration}}月</span>
        </div>
        <div class="item">
          投资回收期：
          <span>{{detailData.recover}}月</span>
        </div>
        <div class="item">
          是否属于高标准基本农田项目：
          <span>{{detailData.isStandard === 0 ? "是" : "否"}}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getData,
  getProjectType
} from "@/api/projectManage/projectInformation.js";

export default {
  data() {
    return {
      projectId:localStorage.getItem('projectId'),
      detailData: {},
      projectTypeList: [] //项目类型
    };
  },

  created() {
    this.getType();
  },
  methods: {
    getDetail() {
      //获取详情
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      getData({ projectId: this.projectId })
        .then(res => {
          this.detailData = res.data;
          this.projectTypeList.forEach(a => {
            if (res.data.type === a.id) {
              this.detailData.type = a.name;
              return false
            }
          });
          loading.close();
        })
        .catch(res => {
          loading.close();
        });
    },
    getType() {
      //获取项目类型列表
      getProjectType().then(res => {
        this.projectTypeList = res.data;
        this.getDetail();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.maincontent {
  padding: 40px 100px;
  .maintitle {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 25px;
    color: #4d4d4d;
  }
  .information {
    margin-top: 40px;
    .item {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #8c8c8c;
      margin-bottom: 20px;
      span {
        margin-left: 8px;
        color: #4d4d4d;
      }
    }
  }
}
</style>
 